<template>
  <div class="parent">
    <h1>钱{{money}}</h1>
<!--    v-model用于表单元素的双向绑定-->
    <input type="text" v-model="info" />
<!--    不使用v-model时通过defineProps和defineEmit实现组件双向数据变化-->
    <Child :modelValue="money" @update:modelValue="handler"></Child>
<!--    v-model组件身上使用是上述的语法糖，触发的是事件update:modelValue的默认回调, 而不是@update:modelValue -->
<!--    第一:相当有给子组件传递props[modelValue] = 10000-->
<!--    第二:相当于给子组件绑定自定义事件update:modelValue-->
    <Child v-model="money"></Child>
    <Child1 v-model:pageNo="pageNo" v-model:pageSize="pageSize"></Child1>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Child from "./Child.vue"
import Child1 from "./Child1.vue"

let money = ref(10000)
let info = ref('')

const handler = (num:number)=>{
  console.log(num);
  money.value=num;
}

let pageNo = ref(1)
let pageSize = ref(50)

</script>

<style scoped>
.parent {
  display: flex;
  justify-content: space-between;
}
</style>